<template>
    <div class="function-box">
        <div class="function-title">平台功能</div>
        <div class="function-imgs">
            <img src="@/assets/f-1.png" class="main-img">
            <div class="details-imgs">
                <div class="details-box">
                    <img src="@/assets/f-2.jpg"  class="details-img" alt="" srcset="">
                    <div class="summary">∷ 丰富数据一体化管理</div>
                    <div class="details-text">储存完善的氧化铝合成数据库，可通过网站前端便捷搜索，可视化呈现。</div>
                </div>
                <div class="details-box">
                     <img src="@/assets/f-3.jpg" class="details-img"  alt="" srcset="">
                     <div class="summary">∷ 高通量第一性原理科学计算</div>
                     <div class="details-text">提供自动化高通量的第一性原理计算资源，精准掌握氧化铝计算物化性质。</div>
                </div>
                <div class="details-box">
                     <img src="@/assets/f-4.jpg" class="details-img"  alt="" srcset="">
                     <div class="summary">∷ 机器学习和智能预测</div>
                     <div class="details-text">提供主流机器学习框架一键式选择数据、训练模型，快速预测关键合成条件因素，提供精准合成氧化铝预测方案。</div>
                </div>

            </div>
        </div>
        <div class="line"></div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.function-box{
    width: 60%;
    margin: 0 auto;
}
.function-title{
    width: fit-content;
    border: 3px solid black;
    border-right: none;
    border-bottom: none;
    border-top: none;
    padding: 5px;
    font: larger;
    font-weight: 600;
    margin: 30px;
}
.main-img{
    width: 70%;
    margin: 30px auto;
}
.details-imgs{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.details-img{

    height: 200px;
    background-color: #f5f5f5;
}
.details-box{
    width: 33%;
}
.summary{
    font-weight: 800;
    font-size: x-large;
    margin: 30px 0;
}
.details-text{
    width: 90%;
    border-top: 1px solid black;
    margin: 30px auto;
    text-align: center;
    /* padding: 10px 0; */
}
.line{
    width: 100%;
    border-bottom: 1px solid black;
    margin: 20px auto;
}
</style>